<template>
  <transition name="FormDesign">
    <div class="dialogFormDesign" v-if="visible">
      <v-form-designer
        @saveJson="saveJson"
        :rowData="rowData"
        :editComponent="editComponent"
        :reloadPage="reloadPage"
        :designer-config="designerConfig"
        :global-dsv="globalDsv"
        :key="vfDesignerRefKey"
        ref="vfDesignerRef"
      >
        <template #customToolButtons>
          <el-button size="mini" @click="close">关闭</el-button>
        </template>
      </v-form-designer>
    </div>
  </transition>
</template>

<script>
import VFormDesigner from "@/components/form-designer/index.vue";
import * as api from "@/api/applicationManage/applicationManage";

export default {
  name: "dialogFormDesign",
  components: { VFormDesigner },
  props: {
    visible: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    ROW: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      json: "",

      designerConfig: {
        resetFormJson: false,
        toolbarMaxWidth: 490,
      },

      //全局数据源变量
      globalDsv: {
        testApiHost: "http://www.test.com/api",
        testPort: 8080,
      },
      rowData: { ...this.ROW },
      vfDesignerRefKey: 0,
    };
  },
  methods: {
    updateComponent(obj) {
      const json = {
        templateScript: obj.pageScript,
        widgetList: obj.widgetList,
      };
      const paramData = {
        ...this.rowData,
        json: JSON.stringify(json),
      };
      api.componentUpdate({ ...paramData }).then(() => {
        this.$message.success("更新成功");
      });
    },
    saveJson(obj) {
      if (this.rowData.type === "component") {
        this.updateComponent(obj);
        return;
      }
       let method = this.ROW.tabType === "page" ? "update" : "updateLayout";
      if (this.json !== JSON.stringify(obj)) {
        this.$confirm(
          "是否将此页面保存为新版本?这意味着可以返回到以前的版本。",
          {
            cancelButtonText: "是",
            confirmButtonText: "否",
          }
        )
          .then(() => {
            api[method]({ ...this.ROW, json: JSON.stringify(obj) }).then(() => {
              this.$message.success("保存成功");
              this.json = JSON.stringify(obj);
              this.$emit("refresh");
              this.reloadPage();
            });
          })
          .catch(() => {
            api[method]({ ...this.ROW, json: JSON.stringify(obj), newVersion: 1 })
              .then(() => {
                this.$message.success("保存成功");
                this.json = JSON.stringify(obj);
                this.$emit("refresh");
                this.reloadPage();
              });
          });
      } else {
        api[method]({ ...this.ROW, json: JSON.stringify(obj) }).then(() => {
          this.$message.success("保存成功");
          this.json = JSON.stringify(obj);
          this.$emit("refresh");
          this.reloadPage();
        });
      }
    },
    getJson() {
      console.log("this.ROW", this.ROW);
      let method = this.ROW.tabType === "page" ? "detail" : "detailLayout";
      const paramsData = this.ROW.tabType === "page" ? { id: this.ROW.oid } : { oid:this.ROW.oid };
      api[method](paramsData).then((res) => {
        let { json } = res.data.data;
        this.$refs["vfDesignerRef"].clearDesigner();
        if (json && json.length > 0) {
          this.$refs["vfDesignerRef"].setFormJson(JSON.parse(json));
        }
      });
    },
    reloadPage(data) {
      if (data) {
        this.ROW = { ...data };
        this.rowData = { ...data };
      }
      this.vfDesignerRefKey += 1;
      this.getJson();
    },
    editComponent(data) {
      this.rowData = {
        ...data,
        type: "component",
      };
      try {
        const jsonData = JSON.parse(data.json);
        const componentData = {
          pageScript: jsonData.templateScript,
          widgetList: jsonData.widgetList,
          dataSource: jsonData.templateScript.dataSource,
        };
        this.$refs["vfDesignerRef"].clearDesigner();

        this.$refs["vfDesignerRef"].loadTempLate(componentData);
      } catch (err) {}
    },
    close() {
      this.$emit("update:visible", false);
    },
  },
  watch: {
    visible: {
      handler(v) {
        if (v) {
          console.log("vvvv", v);
          this.vfDesignerRefKey = 0;
          this.json = this.ROW.json || {};
          this.getJson();
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.dialogFormDesign {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1000;
  background: white;
  top: 0;
  left: 0;
}

.FormDesign-enter-active,
.FormDesign-leave-active {
  transition: all 0.3s;
}

.FormDesign-enter,
.FormDesign-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}
</style>
